<template>
	<view class="uploadList">
		<block>
			<view class="box" v-for="(item, index) in videoList" :key="index">
				<video :src="item" object-fit="fill"></video>
				<view class="del" @click="delVideo(index)">
					<uni-icons type="clear" size="26" color="#000"></uni-icons>
				</view>
			</view>
		</block>
		<view class="upload" v-if="videoList.length < 1" @click="choseVideo">
			<uni-icons type="plusempty" size="50" color="#c7c7c7"></uni-icons>
		</view>
	</view>
</template>

<script>
import baseUrl from '@/utils/config';
import { isBlank } from '@/utils/validate';
import api from '@/api/api';
export default {
	name: 'videoUpload',
	props: {
		video: {
			type: String,
			default: ''
		},
		max: {
			type: Number,
			default: 50
		}
	},
	data() {
		return {
			videoList: []
		};
	},
	mounted() {
		this.videoList = isBlank(this.video) ? [] : this.video.split(',');
	},
	methods: {
		// 上传视频
		choseVideo() {
			const _this = this;
			uni.chooseMedia({
				count: 1,
				mediaType: ['video'],
				sourceType: ['album', 'camera'],
				maxDuration: 30,
				camera: 'back',
				success(res) {
					if (res.tempFiles[0].size < _this.max * 1024 * 1024 && res.tempFiles[0].duration < 30) {
						uni.showLoading({
							title: '上传中...'
						});
						uni.uploadFile({
							url: baseUrl + '/?s=App.Common_File.Upload',
							filePath: res.tempFiles[0].tempFilePath,
							name: 'file',
							formData: {
								access_token: uni.getStorageSync('access_token')
							},
							success: (uploadFileRes) => {
								let data = JSON.parse(uploadFileRes.data);
								_this.videoList.push(data.data.url);
								_this.listChange();
								uni.hideLoading();
							},
							fail: (res) => {
								uni.hideLoading();
								uni.showToast({
									title: '上传失败',
									icon: 'none'
								});
							}
						});
					} else {
						uni.showToast({
							title: '所选视频超过大小或长度限制',
							icon: 'none'
						});
					}
				}
			});
		},
		delVideo(index) {
			this.videoList.splice(index, 1);
			this.listChange();
		},
		listChange() {
			this.$emit('onChange', this.videoList);
		}
	}
};
</script>

<style lang="scss">
.uploadList {
	display: flex;
	flex-wrap: wrap;
	.box {
		width: 220rpx;
		height: 220rpx;
		margin-right: 19rpx;
		margin-bottom: 20rpx;
		border: 1rpx solid #eee;
		border-radius: 6rpx;
		position: relative;
		image {
			width: 220rpx;
			height: 220rpx;
		}
		video {
			width: 220rpx;
			height: 220rpx;
			background: #000;
		}
		.del {
			position: absolute;
			top: 0;
			right: 0;
			z-index: 10;
		}
		&:nth-of-type(3n) {
			margin-right: 0;
		}
	}
	.upload {
		width: 220rpx;
		height: 220rpx;
		border: 1rpx solid #eee;
		border-radius: 6rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
}
</style>
